<template>
  <div class="main">
    <img class="logo" src="../../../static/img/logo.jpg" alt />
    <div class="line"></div>
    <div class="market_title" @click="to_home">树蕙元学习管理平台</div>
    <div class="line"></div>
    <div class="nav">
       <ul>
          <li v-for="item in navUrl" :key="item.id" @click="go_page(item.url)">
            {{item.title}}
          </li>
       </ul>
    </div>
    <div class="market_right">
      <div class="message_box">
        <div class="message_box_num">12</div>
      </div>
      <div class="enlarge_box" @click="handleFullScreen"></div>
      <div class="head_box"></div>
      <div class="user_name">{{usertruename}}</div>
      <img src="../../../static/img/top-jt.png" alt />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fullscreen: false,
      navUrl:[
        {id:"1",url:"/home",title:"首页"},
        {id:"2",url:"/study",title:"学习"},
        {id:"3",url:"/video",title:"视频"},
        {id:"4",url:"/data",title:"资料"},
        {id:"5",url:"/other",title:"其他"}
      ],
      usertruename:""
    };
  },
  methods: {
    // 全屏事件
    handleFullScreen() {
      return;
      let element = document.documentElement;
      //适配
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          //IE11
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    },
    //跳转首页
    to_home(){
      this.$router.push("/home")
    },
    //根据不同的路径跳转不同的子系统
    go_page(url){
      if(this.$route.path !== url){
        window.location.href = url
      }
    }
  },
  mounted(){
    let user = JSON.parse(window.localStorage.getItem('nameUser'))
    this.usertruename = user[0]
  }
};
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 50px;
  background: #fff;
  display: flex;
  align-items: center;
  .logo {
    width: 121px;
    height: 27px;
    margin-left: 38px;
    // padding: 0 46px;
  }
  .line {
    width: 1px;
    height: 38px;
    background: #e6e6e6;
    margin-left: 40px;
  }
  .market_title {
    font-size: 20px;
    font-family: "SourceHanSansCN-Heavy";
    font-weight: bold;
    color: #434343;
    word-spacing: 2px;
    letter-spacing: 2px;
    margin-left: 30px;
    cursor: pointer;
  }
  .nav ul{
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .nav ul li{
    height: 30px;
    line-height: 30px;
    font-size:20px ;
    font-family: "SourceHanSansCN-Heavy";
    font-weight: bold;
    margin-left: 30px;
    cursor: pointer;
  }
  .market_right {
    flex: 1;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-right: 39px;
    .message_box {
      width: 30px;
      height: 30px;
      background: url(../../../static/img/top-message.png);
      background-size: 100% 100%;
      margin-right: 16px;
      cursor: pointer;
      position: relative;
      .message_box_num {
        font-size: 10px;
        position: absolute;
        top: -5px;
        right: -5px;
        width: 20px;
        height: 12px;
        text-align: center;
        line-height: 12px;
        background: #e91717;
        border-radius: 6px;
        color: #fff;
      }
    }
    .enlarge_box {
      width: 30px;
      height: 30px;
      background: url(../../../static/img/top-enlarge.png);
      background-size: 100% 100%;
      margin-right: 16px;
      cursor: pointer;
    }
    .head_box {
      width: 39px;
      height: 39px;
      background: url(../../../static/img/top-name.png);
      background-size: 100% 100%;
      margin-right: 11px;
    }
    .user_name {
      font-size: 14px;
      font-family: "Source Han Sans CN";
      font-weight: 400;
      color: #1a1a1a;
    }
    img {
      width: 17px;
      height: 10px;
      margin-left: 32px;
      cursor: pointer;
    }
  }
}
</style>